<template>
  <div class="m-container">
    <el-divider content-position="left"><h2>{{ selectedDeptNode?.name }}</h2></el-divider>
    <el-row style="height:100%; padding: 0 20px;">
      <el-col :span="4">
        <el-tree :data="depts" :props="defaultProps" @node-click="selectDept"></el-tree>
      </el-col>
      <el-col :span="20">
        <div>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addUser">新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" height="90%" v-loading="loading">
          <el-table-column prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="rawRole" label="身份" width="100"></el-table-column>
          <el-table-column prop="sex" label="性别" width="100"></el-table-column>
          <el-table-column prop="age" label="年龄" width="100"></el-table-column>
          <el-table-column prop="idCard" label="身份证号码" width="180"></el-table-column>
          <el-table-column prop="ethic" label="民族" width="180"></el-table-column>
          <el-table-column prop="politic" label="政治面貌" width="180"></el-table-column>
          <el-table-column prop="phone" label="电话号码" width="180"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="showUserDlg(scope.row, scope.$index)" type="text" size="small">个人详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
  <el-dialog title="员工信息" v-model="dlgUserInfo" :fullscreen="true">
    <el-divider content-position="left"><h3>员工基本信息</h3></el-divider>
    <el-form ref="formUser" :model="formUser" :rules="userInfoRules" label-width="160px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formUser.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="formUser.idCard"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族" prop="ethic">
            <el-select v-model="formUser.ethic" placeholder="请选择">
              <el-option v-for="item in ethicList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌" prop="politic">
            <el-select v-model="formUser.politic" placeholder="请选择">
              <el-option v-for="item in politicList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="formUser.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门" prop="deptId">
            <el-select v-model="formUser.deptId" placeholder="请选择">
              <el-option v-for="item in depts" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>学历信息</h3></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="初始学历">
            <el-select v-model="formUser.rawEduExp" placeholder="请选择">
              <el-option v-for="item in eduList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最高学历">
            <el-select v-model="formUser.topEduExp" placeholder="请选择">
              <el-option v-for="item in eduList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学位">
            <el-select v-model="formUser.degree" placeholder="请选择">
              <el-option v-for="item in degreeList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毕业时间">
            <el-date-picker v-model="formUser.graduationTime" type="date" placeholder="选择日期" format="YYYY 年 MM 月 DD 日"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毕业学校">
            <el-input v-model="formUser.graduateSchool"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所学专业">
            <el-input v-model="formUser.major"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>身份信息</h3></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="岗位职务">
            <el-select v-model="formUser.position" placeholder="请选择">
              <el-option v-for="item in posList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原始身份" prop="rawRole">
            <el-select v-model="formUser.rawRole" placeholder="请选择">
              <el-option v-for="item in roleList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员类别">
            <el-select v-model="formUser.roleType" placeholder="请选择">
              <el-option v-for="item in roleList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>职务信息</h3></el-divider>
      <el-row>          
        <el-col :span="8">
          <el-form-item label="管理职务">
            <el-select v-model="formUser.managePosition" placeholder="请选择">
              <el-option v-for="item in mpList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专业技术职务">
            <el-select v-model="formUser.techPosition" placeholder="请选择">
              <el-option v-for="item in tpList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工勤技能等级">
            <el-select v-model="formUser.skillLevel" placeholder="请选择">
              <el-option v-for="item in spList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管理职务聘任时间">
            <el-date-picker v-model="formUser.manageApTime" type="date" placeholder="选择日期" format="YYYY 年 MM 月 DD 日"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专业技术职务聘任时间">
            <el-date-picker v-model="formUser.techApTime" type="date" placeholder="选择日期" format="YYYY 年 MM 月 DD 日"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工勤技能等级聘任时间">
            <el-date-picker v-model="formUser.skillApTime" type="date" placeholder="选择日期" format="YYYY 年 MM 月 DD 日"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>其他信息</h3></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="参加工作时间">
            <el-date-picker v-model="formUser.joinWorkTime" type="date" placeholder="选择日期" format="YYYY 年 MM 月 DD 日"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="来校时间">
            <el-date-picker v-model="formUser.workTime" type="date" placeholder="选择日期" format="YYYY 年 MM 月 DD 日"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同起止日期">
            <el-date-picker v-model="formUser.contractDate" type="daterange" format="YYYY 年 MM 月 DD 日" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="saveUser">保存员工信息</el-button>
            <el-button type="primary" icon="el-icon-d-arrow-right" plain @click="nextUser" v-if="formUser?.id">下一位员工</el-button>
            <el-button type="danger" icon="el-icon-close" v-if="formUser?.id" @click="deletUser">删除该员工</el-button>
            <el-button type="info" icon="el-icon-refresh-left" v-if="formUser?.id" @click="resetPwd">重置密码</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <el-dialog title="工资信息" v-model="dlgWageInfo" :fullscreen=true>
    <el-form ref="meritForm" :model="meritForm" :rules="wageFormRules" label-width="240px">
      <el-divider content-position="left"><h3>员工基本信息</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名">{{meritForm.name}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门">{{meritForm.dept}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">{{meritForm.sex=='M'?'男':'女'}}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">{{meritForm.age}}岁</el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>基本工资</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="岗位工资" prop="posPay">
            <el-input v-model.number="meritForm.posPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="薪级工资" prop="salaryPay">
            <el-input v-model.number="meritForm.salaryPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提高10%" prop="ratio">
            <el-input v-model.number="meritForm.ratio" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>绩效工资</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="月份基础绩效" prop="monthMerit">
            <el-input v-model.number="meritForm.monthMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年末绩效工资" prop="yearMerit">
            <el-input v-model.number="meritForm.yearMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="超课时绩效" prop="extraLessonMerit">
            <el-input v-model.number="meritForm.extraLessonMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="学生管理绩效" prop="counsellorAllowance">
            <el-input v-model.number="meritForm.counsellorAllowance" placeholder="辅导员/班主任津贴、值班费"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专项奖惩绩效" prop="specialMerit">
            <el-input v-model.number="meritForm.specialMerit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="加班绩效" prop="overtimeMerit">
            <el-input v-model.number="meritForm.overtimeMerit" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>津贴补贴</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="改革性补贴" prop="reformPay">
            <el-input v-model.number="meritForm.reformPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工改保留" prop="reservePart">
            <el-input v-model.number="meritForm.reservePart" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="2000年1月1日参加工作补贴" prop="newEmpSubsidy">
            <el-input v-model.number="meritForm.newEmpSubsidy" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人才引进专项补贴" prop="talentIntroPay">
            <el-input v-model.number="meritForm.talentIntroPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专业（学科）带头人津贴" prop="proLeaderPay">
            <el-input v-model.number="meritForm.proLeaderPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="室主任津贴" prop="officeDirectorPay">
            <el-input v-model.number="meritForm.officeDirectorPay" placeholder="学管、教研室、实验室" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="技师津贴" prop="technicianPay">
            <el-input v-model.number="meritForm.technicianPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卫生防疫津贴" prop="epidemicPay">
            <el-input v-model.number="meritForm.epidemicPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="护龄津贴" prop="nursePay">
            <el-input v-model.number="meritForm.nursePay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="安保人员津贴及值班费" prop="securityPay">
            <el-input v-model.number="meritForm.securityPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保密、密码及信访工作岗位津贴" prop="secretPay">
            <el-input v-model.number="meritForm.secretPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专职司机工作补助" prop="driverPay">
            <el-input v-model.number="meritForm.driverPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="思政课教师岗位津贴" prop="politicTeacherPay">
            <el-input v-model.number="meritForm.politicTeacherPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="独子费" prop="onlyChildPay">
            <el-input v-model.number="meritForm.onlyChildPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="考务费及其他" prop="examPay">
            <el-input v-model.number="meritForm.examPay" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="公务交通补贴" prop="trafficPay">
            <el-input v-model.number="meritForm.trafficPay" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><h3>各项社会保险</h3></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="养老保险" prop="endowmentIns">
            <el-input v-model.number="meritForm.endowmentIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职业年金" prop="careerIns">
            <el-input v-model.number="meritForm.careerIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医疗保险" prop="medicalIns">
            <el-input v-model.number="meritForm.medicalIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="失业保险" prop="unemploymentIns">
            <el-input v-model.number="meritForm.unemploymentIns" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="住房公积金" prop="housingProvidentFund">
            <el-input v-model.number="meritForm.housingProvidentFund" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="saveMerit">保存工资信息</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { getDepts, getUsersOfDept,getUserWage,saveWage } from "@/api/salary";
import { saveUser,getUserDetail,deleteUserById,resetPwd } from '@/api/user';
import { eduList, degreeList, posList, roleList, mpList, tpList, spList, politicList, ethicList } from '@/api/items';
import { userInfoRules } from '@/api/rules';
import { ElMessage,ElMessageBox } from "element-plus";
export default defineComponent({
  name: "Intro",
  setup(props) {
    const userForm = reactive({
      age: 0,
      contractDate: ['', ''],
      contractPeriod: "",
      degree: "",
      deptId: "",
      ethic: "",
      graduateSchool: "",
      graduationTime: null,
      id: "",
      idCard: "",
      joinWorkTime: "",
      major: "",
      manageApTime: null,
      managePosition: "",
      name: "",
      phone: "",
      politic: "",
      position: "",
      rawEduExp: "",
      rawRole: "",
      roleType: "",
      sex: "",
      skillApTime: null,
      skillLevel: "",
      techApTime: null,
      techPosition: "",
      topEduExp: "",
      workTime: "",
    });
    return {
    eduList, degreeList, posList, roleList, mpList, tpList, spList, politicList, ethicList, userInfoRules,
    userForm
    }
  },
  data() {
    return {
      depts: [],
      selectedDeptNode: null,
      tableData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      userId: '',
      formUser: {},
      meritForm: {},
      dlgUserInfo: false,
      dlgWageInfo: false,
      loading: false,
      index: 0
    };
  },
  created() {
    // 获取部门列表
    getDepts().then((res) => {
      this.depts = res.data;
    });
  },
  methods: {
    // 获取部门员工列表
    getDeptUsers() {
      let node = this.selectedDeptNode as any
      if(node) {
        this.loading = true
        getUsersOfDept(node.id).then((res) => {
          this.tableData = res.data
          this.loading = false
          console.log(this.tableData)
        });
      }
    },
    // 选中节点
    selectDept(node: any) {
      this.selectedDeptNode = node
      console.log(node)
      this.getDeptUsers()
    },
    // 显示用户信息
    showUserDlg(row: any, index: number) {
      this.index = index
      getUserDetail(row.id).then(res => {
        this.formUser = res.data
        this.dlgUserInfo = true
        console.log(this.formUser)
      })
    },
    // 显示工资结构
    showWagePage(row: any, index: number) {
      this.index = index
      getUserWage(row.id).then(res => {
        this.meritForm = res.data
        this.dlgWageInfo = true
      })
    },
    // 保存员工信息
    saveUser() {
      (this.$refs['formUser'] as any).validate((valid: boolean) => {
        if(valid) {
          saveUser(this.formUser).then((res: any) => {
            if(res.code !== 20000){
              ElMessage.error(res.message)
              return
            }
            this.getDeptUsers()
            ElMessage.info('保存成功!')
            this.dlgUserInfo = false
          })
        }
      })
    },
    // 保存工资信息
    saveMerit() {
      saveWage(this.meritForm)
      .then(res => {
        if(res.data === true) {
          ElMessage.success('保存成功')
        }
      })
    },
    // 获取下一位员工
    nextUser() {
      this.index += 1
    },
    // 添加新圆滚滚
    addUser() {
      this.formUser = JSON.parse(JSON.stringify(this.userForm))
      this.dlgUserInfo = true
    },
    // 删除用户
    deletUser() {
      let id = (this.formUser as any)?.id
      if(id) {
        ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUserById(id).then(res => {
            if(res.data === true) {
              ElMessage.success('删除用户成功')
              this.getDeptUsers()
              this.dlgUserInfo = false
            }
          })
        })
      }
    },
    // 重置密码
    resetPwd() {
      let id = (this.formUser as any)?.id
      if(id) {
        ElMessageBox.confirm('你正在重置该员工的密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetPwd(id).then(res => {
            let r = res as any
            if(r.code === 20000) {
              ElMessage.success('重置密码成功')
            }
            else{
              ElMessage.error(r.message)
            }
          })
        })
      }
    }
  },
  watch: {
    // 监听序号
    index(val, oldVal) {
      // 值位于0-数组长度之间
      this.index = val>=this.tableData.length? this.tableData.length-1: val
      this.index = val<0? 0: val
      this.formUser = this.tableData[this.index]
    },
    // 监听用户信息
    formUser: {
      handler(val, oldVal) {
      },
      deep:true //true 深度监听
    }
  }
});
</script>
<style scoped>
</style>
